<template>
    <div style="width: 100%; height: 100%;" ref="scatter"></div>
</template>

<script>
import * as echarts from 'echarts'
import request from '@/utils/request'

export default {
    name: 'ScatterChart',
    data() {
        return {
            scatterData: []
        }
    },
    mounted() {
        this.getData()
        window.onresize = () => {
            this.echartsResize()
        }
    },
    methods: {
        getData() {
            request.get('/views/borrowCountByMonth')
                .then(response => {
                    let rawData = response.data
                    let scatterData = echarts.util.map(rawData, item => {
                        return {
                            name: item[0],
                            value: [item[1], item[2]]
                        }
                    })
                    this.scatterData = scatterData
                    this.echartsInit()
                })
                .catch(error => {
                    console.log(error)
                })
        },
        echartsInit() {
            let scatterChart = echarts.init(this.$refs.scatter)
            let option = {
                title: {
                    text: '借阅量散点图',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                xAxis: {
                    type: 'category',
                    name: '',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    type: 'value',
                    name: '借阅量',
                    min: 0
                },
                series: [{
                    type: 'scatter',
                    symbolSize: 20,
                    symbolOffset: [-50, 0],
                    data: this.scatterData,
                    //相邻散点的间距
                     layout: 'vertical',
                },
                ],
                grid:{
                    left: '3%',
                    right: '4%',
                    top: '18%',
                    containLabel: true
                }
            }
            scatterChart.setOption(option)
        },
        echartsResize() {
            let scatterChart = echarts.init(this.$refs.scatter)
            scatterChart.resize()
        }
    }
}
</script>

<style scoped>
</style>
